<template>
  <div class="connect">
    <SearchForm
      class="top g-box-container"
      @resTable="resTable"
      @search="search"
    />
    <div class="table-container g-box-container">
      <p-empty
        v-show="BPisShow === true || M3isShow === true ? fasle : true"
        style="margin-top: 200px"
      />
      <p v-show="M3isShow" class="title" style="margin-top: 20px">一、总览</p>

      <div v-show="BPisShow">
        <TitleSecondary title="BP总览" />
        <TableBPOverview style="width: 100%" :data-source="dataSource8" />
      </div>
      <div v-show="M3isShow">
        <TitleSecondary title="M+3总览" style="margin-top: 20px" />
        <TableM3Overview :data-source="dataSource5" @is-show="isShowM3" />
        <p class="title" style="margin-top: 20px">二、供需简表</p>
        <TitleSecondary title="应用别维度" />
        <TableSupplyDemandAppliaction :data-source="dataSource2" />
        <TitleSecondary title="客户维度" style="margin-top: 20px" />
        <TableSupplyDemandCustomer :data-source="dataSource1" />
        <p class="title" style="margin-top: 20px">三、需求变化</p>
        <TitleSecondary title="应用别维度" />
        <TableDemandChangeAppliaction :data-source="dataSource7" />
        <TitleSecondary title="客户维度" style="margin-top: 20px" />
        <TableDemandChangeCustomer :data-source="dataSource6" />
        <p class="title" style="margin-top: 20px">四、供应变化</p>
        <TitleSecondary title="应用别维度" />
        <TableSupplyChangeAppliaction :data-source="dataSource4" />
        <TitleSecondary title="客户维度" style="margin-top: 20px" />
        <TableSupplyChangeCustomer :data-source="dataSource3" />
      </div>
    </div>
  </div>
</template>

<script>
import SearchForm from './components/SearchForm.vue';
import TableBPOverview from './components/TableBPOverview.vue';
import TableM3Overview from './components/TableM3Overview.vue';
import TableSupplyDemandAppliaction from './components/TableSupplyDemandAppliaction.vue';
import TableSupplyDemandCustomer from './components/TableSupplyDemandCustomer.vue';
import TableDemandChangeAppliaction from './components/TableDemandChangeAppliaction.vue';
import TableDemandChangeCustomer from './components/TableDemandChangeCustomer.vue';
import TableSupplyChangeAppliaction from './components/TableSupplyChangeAppliaction.vue';
import TableSupplyChangeCustomer from './components/TableSupplyChangeCustomer.vue';

import { getTableSupplyDemandCustomer } from '@/api/reportManagenent.js';
import { getTableSupplyDemandSkill } from '@/api/reportManagenent.js';
import { getTablesupplyChangeCustomer } from '@/api/reportManagenent.js';
import { getTablesupplyChangeSkill } from '@/api/reportManagenent.js';
import { getTableM3 } from '@/api/reportManagenent.js';
import { getTableDemandChangeCustomer } from '@/api/reportManagenent.js';
import { getTableDemandChangeSkill } from '@/api/reportManagenent.js';
import { getTableBP } from '@/api/reportManagenent.js';

export default {
  components: {
    SearchForm,
    TableBPOverview,
    TableM3Overview,
    TableSupplyDemandAppliaction,
    TableSupplyDemandCustomer,
    TableDemandChangeAppliaction,
    TableDemandChangeCustomer,
    TableSupplyChangeCustomer,
    TableSupplyChangeAppliaction,
  },
  data() {
    return {
      bpId: null,
      BPisShow: false,
      M3isShow: false,
      dataSource1: [],
      dataSource2: [],
      dataSource3: [],
      dataSource4: [],
      dataSource5: [],
      dataSource6: [],
      dataSource7: [],
      dataSource8: [],
    };
  },

  methods: {
    search(val) {
      this.getTableSupplyDemandCustomer(val.m3Id);
      this.getTableSupplyDemandSkill(val.m3Id);
      this.getTablesupplyChangeCustomer(val.m3Id);
      this.getTablesupplyChangeSkill(val.m3Id);
      this.getTableM3({ m3Id: val.m3Id, bpId: val.bpId ? val.bpId : '' });
      this.getTableDemandChangeCustomer(val.m3Id);
      this.getTableDemandChangeSkill(val.m3Id);
      this.getTableBP(val.bpId);
    },

    async getTableSupplyDemandCustomer(val) {
      if (val) {
        const result = await getTableSupplyDemandCustomer(val);
        this.dataSource1 = result?.data?.data || [];
      }
    },

    async getTableSupplyDemandSkill(val) {
      if (val) {
        const result = await getTableSupplyDemandSkill(val);
        this.dataSource2 = result?.data?.data || [];
      }
    },

    async getTablesupplyChangeCustomer(val) {
      if (val) {
        const result = await getTablesupplyChangeCustomer(val);
        this.dataSource3 = result?.data?.data || [];
      }
    },

    async getTablesupplyChangeSkill(val) {
      if (val) {
        const result = await getTablesupplyChangeSkill(val);
        this.dataSource4 = result?.data?.data || [];
      }
    },

    async getTableM3(val) {
      if (val.m3Id) {
        const result = await getTableM3(val);
        this.dataSource5 = result?.data?.data || [];
        if (this.dataSource5.length !== 0) {
          this.M3isShow = true;
        }
      }
    },

    async getTableDemandChangeCustomer(val) {
      if (val) {
        const result = await getTableDemandChangeCustomer(val);
        this.dataSource6 = result?.data?.data || [];
      }
    },

    async getTableDemandChangeSkill(val) {
      if (val) {
        const result = await getTableDemandChangeSkill(val);
        this.dataSource7 = result?.data?.data || [];
      }
    },

    async getTableBP(val) {
      if (val) {
        const result = await getTableBP(val);
        this.dataSource8 = result?.data?.data || [];
        if (this.dataSource8.length !== 0) {
          this.BPisShow = true;
        }
      }
    },

    resTable(item) {
      if (!item) {
        this.dataSource1 = [];
        this.dataSource2 = [];
        this.dataSource3 = [];
        this.dataSource4 = [];
        this.dataSource5 = [];
        this.dataSource6 = [];
        this.dataSource7 = [];
        this.dataSource8 = [];
        this.BPisShow = false;
        this.M3isShow = false;
      }
    },
  },
};
</script>
<style scoped>
.table-container {
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: auto;
  height: calc(100vh - 160px);
}
.title {
  font-size: 18px;
  color: black;
}
</style>
